<template>
	<div class="photoinfo">
		<!-- 上部分 -->
		<h1>西安到上海机票，急速抢</h1>
		<p class="subtitle">
			<span>发表时间:2018年5月18日11:45:20</span>
			<span>点击2次</span>
		</p>
		<hr>
		<!-- 缩略图 -->
		<div class="thumImg">
			<img src="../../images/meishi.jpg" height="300" width="300" alt="">
			<img src="../../images/meishi2.jpg" height="300" width="300" alt="">
			<img src="../../images/meishi3.jpg" height="300" width="300" alt="">
			<img src="../../images/meishi4.jpg" height="300" width="300" alt="">
			<img src="../../images/meishi5.jpg" height="300" width="300" alt="">
		</div>

		<!-- 图片内容 -->
		<div class="content">
			<p>
				每一个人都有一颗与众不同的心，有些人的心是善良的；有些人的心是美好的；还有一些人的心是永不言弃的。然而，我的心却没有他们的心那么简单，我的心是一颗乐于助人的心，是一颗美好的心。
			</p>
		</div>

		<!-- 评论子组件 -->
		<cmt-box></cmt-box>
	</div>
</template>


<script>
	import comment from "../subcomponent/comment.vue"

	export default{
		data(){
			return{
				list: [{
                    src: '../images/lb1.jpg',
                    w: 600,
                    h: 400
                    }, {
                    src: '../images/lb2.jpg',
                    w: 1200,
                    h: 900
                    }]
			}
		},
		components:{
			'cmt-box':comment
		}
	}
</script>


<style lang="scss" scoped>
	.photoinfo{
		padding:10px;
		h1{
			font-size:18px;
			color:#369;
		}
		.subtitle{
			display:flex;
			justify-content:space-between;
			font-size:12px;
			padding-top:10px;
		}
		.content{
			p{
				line-height:30px;
				font-size:13px;
				color:#666;
			}
		}
	}
	.thumImg{
		img{
			width:25%;
			height:25%;
			margin:10px;
			background-color:#666;
		}
	}
</style>